{% extends 'base.html' %}
{% from 'bootstrap5/form.html' import render_form %}

{% block content %}
    <div class="message-form">
        {{ render_form(form, action=request.full_path, button_map={'submit':'secondary'}) }}
    </div>
    <h6>
        共 {{ messages|length }} 条留言
        <small class="float-right"><a href="#bottom" title="Go Bottom">↓</a></small>
    </h6>
    <div class="list-group">
        {% for message in messages %}
            {% set moment_time=moment(message.timestamp) %}
            <a class="list-group-item list-group-item-action flex-column">
                <div class="d-flex w-100 justify-content-between">
                    <h6 class="mb-1">
                        {% if loop.index == 1 %}
                            最新留言
                        {% else %}
                            留言 {{ loop.revindex }}
                        {% endif %}
                        &nbsp;|&nbsp;&nbsp;{{ message.name }}
                    </h6>
                    <small class="text-muted"  data-bs-toggle="tooltip" data-bs-placement="top"
                           data-timestamp="{{ moment_time.format('lll') | striptags }}">
                        {{ moment_time.fromNow(refresh=True) }}
                    </small>

                </div>
                <p class="mb-1">{{ message.body }}</p>
            </a>
        {% endfor %}
    </div>
{% endblock %}
